<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="9">
        <el-card>
          <div slot="header" class="clearfix">
            <span>CPU</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="4" border>
            <el-descriptions-item>
              <template slot="label">品牌</template>
              {{cpu.Manufacturer}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">主频</template>
              {{cpu['Current Speed']}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">核数</template>
              {{cpu['Core Count']}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">占用率</template>
              <span :class="Number(cpu.usage) > Number(threshold.cpuUsage) ? 'red' : 'green'" v-if="cpu.usage">{{cpu.usage | formatPercent}}%</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card>
          <div slot="header" class="clearfix">
            <span>内存</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="4" border>
            <el-descriptions-item>
              <template slot="label">品牌</template>
              {{memory.brand}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">频率</template>
              {{memory.frequency}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">大小</template>
              {{memory.size}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">占用率</template>
              <span :class="Number(memory.usage) > Number(threshold.memoryUsage) ? 'red' : 'green'" v-if="memory.usage">{{memory.usage | formatPercent }}%</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>显卡</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="1" border>
            <el-descriptions-item>
              <template slot="label">品牌</template>
              {{gpu.brand}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 15px; clear: both;"></div>

    <el-row :gutter="15">
      <el-col :span="9">
        <el-card>
          <div slot="header" class="clearfix">
            <span>网络</span>
          </div>
          <div data-v-fae5bece="" class="margin-top el-descriptions">
            <div class="el-descriptions__body">
                <table class="el-descriptions__table is-bordered">
                  <tbody>
                    <tr class="el-descriptions-row">
                      <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label ">名称</th>
                      <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label ">IP</th>
                      <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label ">连接状态</th>
                      <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label ">MAC地址</th>
                    </tr>
                    <tr class="el-descriptions-row" v-for="(value, index) in formatNetWork(network)" :key="index">
                      <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content">{{value.name}}</td>
                      <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content">{{value.ip}}</td>
                      <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content">{{value.linkStatus}}</td>
                      <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content">{{value.macAddr}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
        </el-card>
      </el-col>

      <el-col :span="9">
        <el-card>
          <div slot="header" class="clearfix">
            <span>硬盘</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="3" border>
            <el-descriptions-item>
              <template slot="label">品牌</template>
              {{disk.brand}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">大小</template>
              {{disk.size}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">占用率</template>
              <span :class="Number(disk.usage) > Number(threshold.diskUsage) ? 'red' : 'green'" v-if="disk.usage">{{disk.usage | formatPercent}}%</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>整机电源控制</span>
          </div>
          <div style="padding-top: 10px; padding-bottom: 10px;">
            <el-row>
              <el-col :span="12" style="padding-top: 6px;"><el-switch v-model="powerControl" active-text="开" inactive-text="关" @change="savePower($event)"></el-switch></el-col>
              <el-col :span="12"><el-button type="primary" size="small" style="margin-left: 15px;" @click="resetPower">重启</el-button></el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 15px; clear: both;"></div>

    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>传感器</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="6" border>
            <el-descriptions-item>
              <template slot="label">温度</template>
              <ul class="show-list">
                <li class="show-list" v-for="item in formatObject(sensor.temperature)" :key="item.name">{{item.name}} <span :class="Number(item.value) > Number(threshold.sensorTemperature) ? 'red' : 'green'">{{item.value}}°C</span></li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">电压</template>
              <ul class="show-list">
                <li v-for="item in formatObject(sensor.voltage)" :key="item.name">{{item.name}} <span :class="Number(item.value) > Number(threshold.sensorVoltage) ? 'red' : 'green'">{{item.value}}V</span></li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">电流</template>
              <ul class="show-list">
                <li v-for="item in formatObject(sensor.electricCurrent)" :key="item.name">{{item.name}} <span>{{item.value}}A</span></li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">功耗</template>
              <span :class="Number(sensor.powerWaste) > Number(this.threshold.powerWaste) ? 'red' : 'green'">{{sensor.powerWaste}}W</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">风扇转速</template>
              {{sensor.speed}}转/分
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">整机电源状态</template>
               <span :class="Number(sensor.powerStatus) === 0 ? 'green' : 'red'">{{Number(sensor.powerStatus) === 0 ? "正常" : "关机"}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cpu: {
          'Manufacturer': '',
          'Current Speed': '',
          'Core Count': '',
          'usage': ''
      },
      memory: {
          'brand': '',
          'frequency': '',
          'size': '',
          'usage': ''
      },
      disk: {
          'brand': '',
          'size': '',
          'usage': ''
      },
      network: [],
      gpu: {
          'brand': '',
      },
      sensor: {
          'temperature': '',
          'voltage': '',
          'electricCurrent': '',
          'powerWaste': '',
          'speed': '',
          'powerStatus': ''
      },
      powerControl: true,
      init: -1,
      threshold: {
          'cpuUsage': '',
          'memoryUsage': '',
          'diskUsage': '',
          'powerWaste': '',
          'sensorTemperature': '',
          'sensorVoltage': '',
          'interval': 100
      }
    };
  },
  methods: {
    formatObject(obj){
      let arr = [];
      for(let key in obj){
        arr.push({
          name: key,
          value: obj[key]
        })
      }
      return arr;
    },
    formatNetWork(arr){
      let thisArr = [];

      for (let i = 0; i < arr.length; i++) {
          for (const key in arr[i]) {
              thisArr.push({
                  name: key,
                  ip: arr[i][key].ip,
                  linkStatus: arr[i][key].linkStatus,
                  macAddr: arr[i][key].macAddr,
              })
          }
      }

      return thisArr;
    },
    interval(){
      this.init = setInterval(() => {
        this.getData();
      }, 1000 * this.threshold.interval);
    },
    async getData(){
      const { cpu, memory, disk, network, gpu, sensor, threshold } = await this.$axios.get("/api/getData");
      this.cpu = cpu;
      this.memory = memory;
      this.disk = disk;
      this.network = network;
      this.gpu = gpu;
      this.sensor = sensor;
      this.threshold = threshold;

      if(this.init !== -1){
        clearInterval(this.init)
      }

      this.interval();
    },
    savePower($event){
      const that = this;
      this.$confirm(`确定${$event?'开启':'关闭'}电源吗?`, '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          /////////////////////////////////////////////////////////////////////////
          this.$axios.post("/api/savePower", {powerControl: $event}).then(data => {
            this.$notify({
              title: "成功",
              message: data.msg
            })
          }).catch(error => {
            that.$notify.error({
              title: "错误",
              message: error.msg
            })

            that.powerControl = !$event;   
          })
          /////////////////////////////////////////////////////////////////////////
        }).catch(() => {
          that.$notify.warning({
            title: "提示",
            message: `${$event?'开启':'关闭'}操作已取消`
          })

          that.powerControl = !$event;    
        });
    },
    resetPower(){
      this.$axios.get("/api/resetPower").then(data => {
        this.$notify({
          title: "成功",
          message: data.msg
        })
      }).catch(error => {
        this.$notify.error({
          title: "错误",
          message: error.msg
        })
      })
    }
  },
  mounted(){
    this.getData();
  },
  destroyed(){
    clearInterval(this.init);
  }
};
</script>

<style scoped>
.red{
  color: white;
  background: red;
  padding: 2px 5px 2px 5px;
}
.green{
  color: white;
  background: green;
  padding: 2px 5px 2px 5px;
}
.show-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.show-list li{
  padding-top: 8px;
  padding-bottom: 8px;
  height: 22px;
  border-bottom: 1px solid #ececec;
}
.show-list li:last-child{
  border-bottom: none!important;
}
.show-list li span{
  float: right;
  padding-top: 0!important;
  padding-bottom: 0!important;
}
</style>